export default {
  data() {
    return {
      // 定义全局地图列表数据
      map: null,
      // 定义当前地图id
      currentId: null,
    };
  },
  methods: {
    setMapData(map, currentId) {
      this.map = map;
      this.currentId = currentId;
    },
    setArrow(ctx, canvasWidth, canvasHeight) {
      let mapObj = this.map.filter((item) => item.id == this.currentId)[0];
      let showTop = false;
      let showLeft = false;
      let showRight = false;
      let showDown = false;
      for (let key in mapObj) {
        if (key == "topId" && mapObj[key]) {
          showTop = true;
        } else if (key == "leftId" && mapObj[key]) {
          showLeft = true;
        } else if (key == "rightId" && mapObj[key]) {
          showRight = true;
        } else if (key == "downId" && mapObj[key]) {
          showDown = true;
        }
      }
      // 设置上箭头
      if (showTop) {
        const imgTop = new Image();
        imgTop.src = require("@/assets/arrow-circle-up.png");
        imgTop.onload = () => {
          ctx.drawImage(imgTop, canvasWidth / 2 - 10, 10, 20, 20);
        };
      }
      // 设置左箭头
      if (showLeft) {
        const imgLeft = new Image();
        imgLeft.src = require("@/assets/arrow-circle-left.png");
        imgLeft.onload = () => {
          ctx.drawImage(imgLeft, 10, canvasHeight / 2 - 10, 20, 20);
        };
      }
      // 设置右箭头
      if (showRight) {
        const imgRight = new Image();
        imgRight.src = require("@/assets/arrow-circle-right.png");
        imgRight.onload = () => {
          ctx.drawImage(
            imgRight,
            canvasWidth - 30,
            canvasHeight / 2 - 10,
            20,
            20
          );
        };
      }
      // 设置下箭头
      if (showDown) {
        const imgDown = new Image();
        imgDown.src = require("@/assets/arrow-circle-down.png");
        imgDown.onload = () => {
          ctx.drawImage(
            imgDown,
            canvasWidth / 2 - 10,
            canvasHeight - 30,
            20,
            20
          );
        };
      }
    },
    inspectArrow(x, y, canvasWidth, canvasHeight) {
      let topStatus =
        x >= canvasWidth / 2 - 10 &&
        x <= canvasWidth / 2 + 10 &&
        y >= 10 &&
        y <= 30;
      let leftStatus =
        y >= canvasHeight / 2 - 10 &&
        y <= canvasHeight / 2 + 10 &&
        x >= 10 &&
        x <= 30;
      let rightStatus =
        y >= canvasHeight / 2 - 10 &&
        y <= canvasHeight / 2 + 10 &&
        x >= canvasWidth - 30 &&
        x <= canvasWidth - 10;
      let downStatus =
        x >= canvasWidth / 2 - 10 &&
        x <= canvasWidth / 2 + 10 &&
        y >= canvasHeight - 30 &&
        y <= canvasHeight - 10;
      if (topStatus || leftStatus || rightStatus || downStatus) {
        // 触发回调函数
        this.arrowClickCallback(
          topStatus ? 1 : leftStatus ? 2 : rightStatus ? 3 : downStatus ? 4 : 0
        );
      }
    },
    // 这个方法用于处理箭头被点击后的回调逻辑
    arrowClickCallback(event) {
      let mapObj = this.map.filter((item) => item.id == this.currentId)[0];
      let TopRouter = event == 1 ? mapObj.topRouter : null,
        LeftRouter = event == 2 ? mapObj.leftRouter : null,
        RightRouter = event == 3 ? mapObj.rightRouter : null,
        DownRouter = event == 4 ? mapObj.downRouter : null;
      this.$router.push(TopRouter || LeftRouter || RightRouter || DownRouter);
      this.$store.commit(
        "map/UPDATE_CURRENT_ID",
        event == 1
          ? mapObj.topId
          : event == 2
          ? mapObj.leftId
          : event == 3
          ? mapObj.rightId
          : mapObj.downId
      );
    },
  },
};
